<template>
  <div class="goods">
    <qwerty title1='商品管理' title2='商品列表'></qwerty>
 <el-card style="margin-top:20px">
    <el-row :gutter="20">
  <el-col :span="6">
    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
    <el-button slot="append" icon="el-icon-search" @click="onSubmit">查询</el-button></el-input>
  </el-col>
  <el-col :span="2">
    <el-button type="primary" @click="add">添加用户</el-button>
  </el-col>
</el-row>
    <el-table
    :data="tableData"
    stripe
    style="width: 100%;margin-top:20px">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="650">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间">
          <template slot-scope="scope">
              {{scope.row.add_time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="handleEdit(scope.row)">
                        </el-button>
          <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="handleDelete(scope.row)">
                        </el-button> 
      </template>
        </el-table-column>
  </el-table>
    <el-pagination style="margin-top:20px;text-align: center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[8, 10, 12]" :page-size="queryInfo.pagesize" layout="total,sizes, prev, pager, next,jumper" :total="total">
        </el-pagination>
  </el-card>
  </div>
</template>

<script>
import {getGoods,deleteGoods} from '@/api/goods'
export default {
  name: 'goods',
  created(){
   this.select();
  },
  data(){
    return{
       value:[],
        cascaderProps:{
          value:'cat_id',
          label:'cat_name',
          children:'children',
          checkStrictly:"true"
        },
        options:[],
      fileList: [],
        title:'',
        isShow:true,  
        queryInfo:{
          pagenum: 1,
          pagesize: 8,  
          query:'',
        },
        total: 0,
        tableData: [],
    }
  },
  methods:{
    handleEdit(row){
        this.$router.push('/updategoods/'+row.goods_id)
    },
    add(){
      const vm = this;
            vm.$router.push({name: 'add', params: { id: 10 }})
    },
    async handleDelete(row){
       var getConfirm=await this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        if(getConfirm==='confirm'){
          var {data:res} = await deleteGoods(`goods/${row.goods_id}`);
              console.log(res)
                if(res.meta.status==200){
                  this.$message({
                      message: res.meta.msg,
                      type: 'success'
                  });
                  this.select();
                }else{
                   this.$message({
                      message: res.meta.msg,
                      type: 'error'
                  });
                  this.select();
                }
        }
    },
    async select(){
      var {data:res}=await getGoods(this.queryInfo);
        console.log(res);
        this.tableData=res.data.goods
        this.total=res.data.total;
        
    },
    async onSubmit() {
      this.queryInfo.pagenum=1;
        var {data:res}=await getGoods(this.queryInfo);
        // console.log(res);
        this.tableData=res.data.goods
        this.total=res.data.total;
      },
      handleSizeChange(size) {
          this.queryInfo.pagesize = size;
          this.select();
      },
      handleCurrentChange(num) {
          this.queryInfo.pagenum = num;
          this.select();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
  }
}
</script>

<style scoped>

</style>
